<template>
  <div class="el-dialog__wrapper" v-if="showTree">
      <div class="treeBox el-dialog" :style="{width:treeWidth+'px'}">
          <div class="el-dialog__header">
              <span class="el-dialog__title">{{ title }} {{ ref }}</span>
              <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                  <i class="el-dialog__close el-icon el-icon-close" @click="cancel"></i>
                </button>
          </div>
          <div class="el-dialog__body" v-loading="isLoading">
              <div class="data-show">
                  <el-tree :data="dataType" :props="labelSet" @node-click="clickTree"></el-tree>
                  <el-table v-if="isQueryUser" class="userTable" ref="multipleTable" :data="userTableData" tooltip-effect="dark" style="width: 400px" @selection-change="handleSelectionChange">
                      <el-table-column type="selection">
                      </el-table-column>
                      <el-table-column prop="name" label="姓名">
                      </el-table-column>
                      <el-table-column prop="position" label="职位" show-overflow-tooltip>
                      </el-table-column>
                  </el-table>
                  <el-table v-if="isQueryUser2" class="userTable" ref="multipleTable" :data="userTableData2" tooltip-effect="dark" style="width: 400px" @selection-change="handleSelectionChange">
                      <el-table-column prop="name" label="姓名">
                      </el-table-column>
                      <el-table-column prop="position" label="职位" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="操作" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-button size="mini" @click="handleChoose(scope.row)">选择</el-button>
                      </template>
                      </el-table-column>
                  </el-table>
              </div>
              <p>选中部门: {{ treeCurrentTarget }}</p>

          </div>
          <div class="el-dialog__footer" v-if="showFastBtn">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="sendVal">确定</el-button>
          </div>
      </div>
      <div class="v-modal" style="z-index: 3000;"></div>
  </div>
</template>

<script>
import request from "@/utils/request";
import store from "../store/index";
export default {
  name: "tree",
  data() {
    return {
      showFastBtn:true,
      isLoading: false,
      isQueryUser: false,
      isQueryUser2: false,
      treeWidth: 300,
      className: "",
      title: "",
      ref: "",
      showTree: true,
      treeCurrentTarget: "",
      treeCurrentTargetId: "",
      dataType: [],
      dataType01: [],
      dataType02: [],
      userTableData: [],
      userTableData2: [],
      multipleSelection: [],
      labelSet: {
        label: "label"
      }
    };
  },
  methods: {
    handleChoose(info){
        let treeData = {
          val: info.name,
          id: info.id,
          ref: this.ref
        };
        store.dispatch("setTreeData", treeData).then(() => {
          this.showTree = false;
        });
    },
    sendVal() {
      let treeCondig = this.title;
      if (treeCondig !== "查找责任人") {
        let treeData = {
          val: this.treeCurrentTarget,
          id: this.treeCurrentTargetId,
          ref: this.ref
        };
        if (treeData.val != "" && treeData.ref != "") {
          store.dispatch("setTreeData", treeData).then(() => {
            this.showTree = false;
          });
        } else {
          this.showTree = false;
        }
      } else {
        let payload = this.multipleSelection;
        store.commit("SET_USERTREEDATA", payload);
        this.showTree = false;
      }
    },
    cancel() {
      this.showTree = false;
    },
    clickTree(data) {
      let TypeText = this.title;
      this.treeCurrentTarget = data.label;
      this.treeCurrentTargetId = data.id;
      if (TypeText === "查找责任人") {
        //查询部门人列表
        request({
          url: this.$api.queryUserByDepartment + "?departmentId=" + data.id,
          method: "get"
        }).then(res => {
          this.userTableData = res.data;
        });
      }
      if (TypeText === "查找责任人2") {
        //查询部门人列表
        request({
          url: this.$api.queryUserByDepartment + "?departmentId=" + data.id,
          method: "get"
        }).then(res => {
          this.userTableData2 = res.data;
        });
      }
    },
    getTreeData(treeType) {
      //获取树桩数据
      switch (treeType) {
        case "查找分类":
          this.isLoading = true;
          request({
            url: this.$api.queryAllSort,
            method: "get"
          }).then(res => {
            this.dataType = res.data;
            this.isLoading = false;
          });
          break;
        case "查找组织":
          this.isLoading = true;
          request({
            url: this.$api.getAllDepartment,
            method: "get"
          }).then(res => {
            this.dataType = res.data;
            this.isLoading = false;
          });
          break;
        case "查找储存位置":
          this.isLoading = true;
          request({
            url: this.$api.queryAllStorage,
            method: "get"
          }).then(res => {
            this.dataType = res.data;
            this.isLoading = false;
          });
          break;
        case "查找供应商":
          this.dataType = this.dataType02;
          break;
        case "查找责任人":
          this.isLoading = true;
          this.isQueryUser = true;
          this.treeWidth = 800;
          request({
            url: this.$api.getAllDepartment,
            method: "get"
          }).then(res => {
            this.dataType = res.data;
            this.isLoading = false;
          });
          break;
        case "查找责任人2":
          this.isLoading = true;
          this.isQueryUser2 = true;
          this.showFastBtn = false;
          this.treeWidth = 800;
          request({
            url: this.$api.getAllDepartment,
            method: "get"
          }).then(res => {
            this.dataType = res.data;
            this.isLoading = false;
          });
          break;
      }
    },
    handleSelectionChange(val) {
      let NewData = [];
      for (let item of val) {
        let one = {
          userId: item.id,
          name: item.name
        };
        NewData.push(one);
      }
      this.multipleSelection = NewData;
    }
  },
  mounted() {
    //每次打开组件都执行
    this.getTreeData(this.title);
  },
  watch: {
    type: function(val, oldVal) {
      this.getTreeData(val);
    }
  }
};
</script>

<style lang="less" scoped>
.data-show {
  display: flex;
  .el-tree {
    flex: 1;
  }
}
.treeBox {
  margin-top: 15vh;
  /* width: 300px; */
  background: #fff;
  z-index: 3001;
}
.el-dialog__wrapper {
  z-index: 9;
}
.el-dialog__body {
  transition: ease 0.3s;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}
</style>
